<template>
	<view class="race">
		<view class="race-title">比赛记录</view>
		
		<!-- 日期选择器 -->
		<view class="uni-list">
			<view class="uni-list-cell" style="display: flex; padding: 30rpx 0rpx;">
				<view class="uni-list-cell-left">
					选择日期: 
				</view>
				<view class="uni-list-cell-db" style="margin-left: 20rpx;">
					<!-- 选择器组件 -->
					<picker mode="date" 
						:value="date" 
						:start="startDate" 
						:end="endDate" 
						@change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
				</view>
			</view>
		</view>
		
		
		<!-- 比赛记录 -->
		<view class="race-list">
			<view class="ul" v-if="arr.length != 0">
				<view class="li" v-for="(item,index) in arr">
					<view class="li-top" @click="showChapter(index)">
						<view class="red">{{item.red_team}}</view>
						<view class="score">
							<text class="text">{{item.red_total}}</text>
							<text class="text">-</text>
							<text class="text">{{item.blue_total}}</text>
						</view>
						<view class="blue">{{item.blue_team}}</view>
					</view>
					<view class="li-bottom" @click="showChapter(index)">{{item.datetime}}</view>
					<!-- 下拉列表 -->
					<view :class="['li-list', item.xxx ?'':'hide']">
						<view class="list-list-opt" v-for="opt in item.result">
							<view class="item-title">{{opt.chapter}}</view>
							<view class="item-box">
								<view class="item-box-left">
									<view>得分:{{opt.red.score}}</view>
									<view>犯规次数:{{opt.red.foul}}</view>
									<view>暂停次数:{{opt.red.pauseCount}}</view>
								</view>
								<view class="item-box-right">
									<view>得分:{{opt.blue.score}}</view>
									<view>犯规次数:{{opt.blue.foul}}</view>
									<view>暂停次数:{{opt.blue.pauseCount}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="message" v-else>
				暂无比赛记录~~~
			</view>
		</view>
		
		<!--分页器 -->
		<view class="race-page" v-if="num != 0">
			 <view class="ul">
				 <view  
				  v-for="(page) in num" :class="['li', {active: current==page}]"
				  @click="pageRaceInfoListFn(page, size)">
					{{page}}
				 </view>
			 </view>
		</view>		
				
		<!-- 跳转管理页面 -->	
		<view class="race-footer">
			<navigator class="link" url="/pages/administrator/administrator">
				管理中心(仅管理员)
			</navigator>
		</view>
	</view>
</template>

<script setup>
	// 组合式开发
	import {
		ref,
		computed
	} from 'vue';

	// 导入查询云数据的函数
	import {
		getRaceInfoList,
		queryDateRaceInfoList,
		pageRaceInfoList,
		pageRaceInfoCount
	} from '../../db/index'
	
	
	// 定义数组记录每一场比赛信息
	const arr = ref([])
	
	// 变量记录总数量
	let total = ref(0);// 总数量
	let size = ref(5);// 数量
	let num = ref(0);// 多少页
	let current = ref(1);// 页码
	

	// 选择器对应的属性和方法
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}/${month}/${day}`;
	}
	const currentDate = getDate({
		format: true
	})
	const date = ref(currentDate)
	const startDate = computed(()=> {
		return getDate('start');
	})
	const endDate = computed(()=> {
		return getDate('end');
	})
	
	// 选择日期
	const bindDateChange= (e) => {
		date.value = e.detail.value
		// console.log("date.value:",date.value);
		// 根据用户选择的日期查询数据
		// queryDateRaceInfoListFn(date.value);
		
		// 分页的初始值为1 
		current.value = 1;
		pageRaceInfoListFn(current.value,size.value);
		// 切换日期
		pageRaceInfoCountFn();
	}
	
	
	// 获取当前日期比赛记录总数量
	const pageRaceInfoCountFn = async ()=> {
		await pageRaceInfoCount(date.value)
		.then(
			res=> {
				// console.log("总数量:", res)
				total.value = res.total;
				num.value = Math.ceil(res.total / size.value)
			}
		)
	}
	
	
	// 编写一个分页的函数
	const pageRaceInfoListFn = async (page , pageSize) => {
		uni.showLoading({
			title:'正在查询..'
		})
		// 给页码赋值
		current.value = page;
		// 根据日期、页码、数量
		await pageRaceInfoList(date.value, page, pageSize)
		.then(
			data=> {
				// 数据更新，页面变化
				arr.value = data;
			}
		)
		uni.hideLoading();
	}
	
	

	// 获取比赛记录
	const infoList = async () => {
		uni.showLoading({
			title: '正在加载...'
		})
		await getRaceInfoList().then(
			data => {
				// 采用vue3的 setup语法。 所以需要通过响应对象.value
				arr.value = data;
				num.value = Math.ceil(arr.value.length / size.value)
			}
		)
		uni.hideLoading();
	}

	// 初始化
	// infoList();
	
	// 获取当前日期总数量
	pageRaceInfoCountFn();
	// 显示当前日期的第一页数据
	pageRaceInfoListFn(current.value, size.value);


	// 编写显示或隐藏每一节数据的方法 （手风琴效果）
	const showChapter = (index) => {
		// console.log("比赛索引值:", index);
		if (arr.value[index].xxx == undefined) {
			arr.value[index].xxx = true;
		} else {
			arr.value[index].xxx = undefined;
		}
		console.log(arr.value[index].xxx);
	}








	// // 获取db引用
	// const db = uniCloud.databaseForJQL() //代码块为cdb
	// const raceInfoTable = db.collection('race-info');
	// 获取比赛记录
	// const getRaceInfoList = async ()=> {
	// 	uni.showLoading({
	// 		title:'正在加载...'
	// 	})
	// 	await raceInfoTable.where({}).get()
	// 	.then((res)=>{
	// 	  // res 为数据库查询结果
	// 		console.log("比赛记录:",res.data);
	// 		if(res.errCode == 0) {
	// 			// 赋值，让页面做出列表渲染
	// 			arr.value = res.data;
	// 			console.log('--->',res);
	// 		}
	// 		else {
	// 			uni.showToast({
	// 				title:'请求失败',
	// 				icon:'error'
	// 			})
	// 		}
	// 	})
	// 	.catch((err)=>{
	// 	  console.log(err.code); // 打印错误码
	// 	  console.log(err.message); // 打印错误内容
	// 	})
	// 	uni.hideLoading();
	// }

	// // 初始化
	// getRaceInfoList();
</script>

<style lang="scss">
	@import "../../common/style/list.scss";
	.race-footer {
		margin-top: 40rpx;
		text-align: center;
		.link {
			background-color: transparent;
			color: #06A17E;
			text-decoration: underline;
		}
	}
</style>